﻿@{
    ViewBag.Title = "Quản lý lựa chọn sản phẩm";
    Layout = "~/Views/Shared/_Layout.Management.cshtml";
}
<h2 class="app">
	<strong>Express - Quản lý lựa chọn sản phẩm</strong>
</h2>
<div class="title">
    <span class="right-btns">
        <span class="headfilter">        
            <input id="searchKeyword" type="text" class="text spl search filter" style="margin-top: -1px;" data-bind="value: Keywords, event: { keypress: RunSomethingKey }" />
            <div class="select-holder">
  				<select class="select1" id="group" data-bind='value: ProductGroup, foreach: ProductGroupOptions, optionCaptions: "Select Group"'>
  					<option data-bind="value: ID, text: Name"></option>
  				</select>
            </div>
            <a href="#" class="btn btn-go" data-bind="click: SearchButton">Go</a>
        </span>
        <span class="v-line"></span>
        <a href="/Management/ProductOptionList/Add">Thêm mới &raquo;</a>
    </span>
    <h3>Xem các lựa chọn</h3>
</div>
<span class="paging">
    <span class="pageleft">
        <span class="total" data-bind='text: PageText'></span>
        <span class="show">Hiển thị <input type="text" class="text" data-bind="value: PageSize" onkeypress="return isNumberKey(event)" /> trên trang</span>
    </span>
    <span class="pages">Trang <input type="text" class="text" data-bind="value: CurrentPageIndex" onkeypress="return isNumberKey(event)" /> của <span data-bind="text: maxPageIndex"></span>
    <a href="##" class="btn btn-prev-arrow" data-bind="click: PrevButton, attr: {'class': PrevButtonClass}"></a>                            
    <a href="##" class="btn btn-next-arrow" data-bind="click: NextButton, attr: {'class': NextButtonClass}"></a>
    </span>
</span>
<table class="tablegrid" cellspacing="0" border="0">
    <thead>
        <tr class="title">        
		    <th>
                <span class="w">
                    <a href="#" data-bind='click: function(event) { SetOrder(event, "Name")}'>Tên lựa chọn</a>
                    <div class="sort_wrapper" id="Name">  
                        <span class="grid_order ui_icon"></span>
                    </div>               
                </span>
            </th>      
		    <th>
                <span class="w">
                    <a href="#" data-bind='click: function(event) { SetOrder(event, "ShortDesc")}'>Mô tả ngắn</a>
                    <div class="sort_wrapper" id="ShortDesc">  
                        <span class="grid_order ui_icon"></span>
                    </div>               
                </span>
            </th>  
		    <th>
                <span class="w">
                    <a href="#" data-bind='click: function(event) { SetOrder(event, "Price")}'>Giá</a>
                    <div class="sort_wrapper" id="Price">  
                        <span class="grid_order ui_icon"></span>
                    </div>               
                </span>
            </th> 
		    <th>
                <span class="w">
                    <a href="#" data-bind='click: function(event) { SetOrder(event, "UnitPrice")}'>Đơn vị</a>
                    <div class="sort_wrapper" id="UnitPrice">  
                        <span class="grid_order ui_icon"></span>
                    </div>               
                </span>
            </th>
		    <th>
                <span class="w">
                    <a href="#" data-bind='click: function(event) { SetOrder(event, "LongTime")}'>Thời gian</a>
                    <div class="sort_wrapper" id="LongTime">  
                        <span class="grid_order ui_icon"></span>
                    </div>               
                </span>
            </th>
		    <th>
                <span class="w">
                    <a href="#" data-bind='click: function(event) { SetOrder(event, "TimeUnit")}'>Đơn vị</a>
                    <div class="sort_wrapper" id="TimeUnit">  
                        <span class="grid_order ui_icon"></span>
                    </div>               
                </span>
            </th>
            <th class="active centeralign">
                <span class="w">
                    Mặc định               
                </span>
            </th>
            <th class="active centeralign">
                <span class="w">
                    Kích hoạt               
                </span>
            </th>
		    <th class="last centeralign"><span class="w">Xóa</span></th>
        </tr>
    </thead>
    <tbody data-bind="foreach: ItemsOnPage">
        <tr class="line" data-bind="attr: {'class': Active? 'line': 'line new'}">
		    <td>
                <span class="w" style="font-weight:bold">
                    <a data-bind='text: Name, attr: {href: "/Management/ProductOptionList/Edit/" + ID}'>Edit</a>
                </span>
            </td>
		    <td>
                <span class="w" style="font-weight:bold" data-bind='text: ShortDesc'>
                </span>
            </td>
		    <td>
                <span class="w red" style="font-weight:bold" data-bind='text: OptionPrice'>
                </span>
            </td>
		    <td>
                <span class="w" style="font-weight:bold" data-bind='text: UnitPrice'>
                </span>
            </td>
		    <td>
                <span class="w red" style="font-weight:bold" data-bind='text: LongTimeValue'>
                </span>
            </td>
		    <td>
                <span class="w" style="font-weight:bold" data-bind='text: LongTimeUnit'>
                </span>
            </td>
            <td class="active centeralign">
                <span class="w">
                    <input type="checkbox" name="default" disabled="disabled" data-bind="checked: IsDefault" />
                </span>
            </td>
            <td class="active centeralign">
                <span class="w">
                    <input type="checkbox" name="active" disabled="disabled" data-bind="checked: Active" />
                </span>
            </td>
		    <td class="last centeralign">
                <span class="w">
                    <a class="btn btn-x delete" data-bind='attr: {href: "#cfmDelete", id: "archivetype" + ID, rel: Name, onclick: "DeleteDialog(" + ID + ")"}'>Delete</a>
                </span>
            </td>
	    </tr>
    </tbody>
</table>
@Html.Partial("_PopupConfirmDeleted")
<script type="text/javascript">
    var data = @(Html.Raw(Json.Encode(Model)));
</script>
<script src="/Scripts/Product/ProductOptionGrid.js" type="text/javascript"></script>